<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Graph 3D camera position</title>

    <style>
      body {font: 10pt arial;}
      td {font: 10pt arial}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../graph3d.js"></script>
    
    <script type="text/javascript">
      var data = null;
      var graph = null;

      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      function custom(x, y) {
        return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
      }
      
      // callback function, called when the camera position has changed 
      function oncamerapositionchange() {
        // adjust the values of startDate and endDate
        var pos = graph.getCameraPosition();
        document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
        document.getElementById('vertical').value   = parseFloat(pos.vertical.toFixed(3));
        document.getElementById('distance').value   = parseFloat(pos.distance.toFixed(3));
      }
      
      // set the camera position
      function setcameraposition() {
        var horizontal = parseFloat(document.getElementById('horizontal').value);
        var vertical = parseFloat(document.getElementById('vertical').value);
        var distance = parseFloat(document.getElementById('distance').value);        
        var pos = {
          "horizontal": horizontal, 
          "vertical":vertical, 
          "distance":distance};
        graph.setCameraPosition(pos);
        
        // retrieve the camera position again, to get the applied values
        oncamerapositionchange();
      }

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create and populate a data table.
        data = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'y');
        data.addColumn('number', 'value');

        // create some nice looking data with sin/cos
        var steps = 50;  // number of datapoints will be steps*steps
        var axisMax = 314;
        axisStep = axisMax / steps;
        for (var x = 0; x < axisMax; x+=axisStep) {
          for (var y = 0; y < axisMax; y+=axisStep) {
            var value = custom(x,y);
            data.addRow([x, y, value]);
          }
        }

        // specify options
        options = {width:  "600px", 
                   height: "600px",
                   style: "surface",
                   showPerspective: true,
                   showGrid: true,
                   showShadow: false,
                   keepAspectRatio: true,
                   verticalRatio: 0.5
                   };

        // Instantiate our graph object.
        graph = new links.Graph3d(document.getElementById('mygraph'));

        // Add event listeners
        google.visualization.events.addListener(graph, 'camerapositionchange', 
          oncamerapositionchange);

        // Draw our graph with the created data and options 
        graph.draw(data, options);
        //graph.redraw();
      }
   </script>
  </head>

  <body>
    <h1>Graph 3d camera position</h1>
    <table>
      <tr>
        <td>Horizontal angle (0 to 2*pi)</td>
        <td><input type="text" id="horizontal" value="1.0"></td>
      </tr>
      <tr>
        <td>Vertical angle (0 to 0.5*pi)</td>
        <td><input type="text" id="vertical" value="0.5"></td>
      </tr>
      <tr>
        <td>Distance (0.71 to 5.0)</td>
        <td><input type="text" id="distance" value="1.7"></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="Set" onclick="setcameraposition();"></td>
      </tr>
    </table>
  
    <div id="mygraph"></div>

    <div id="info"></div>
  </body>
</html>
